import React ,{lazy}from 'react';
import {connect} from 'react-redux';
import action from '../../../store/action';
import Swiper from 'swiper';
import {lazyImg,GoPagePush,setScrollTop} from '../../../assets/js/utils'
import 'swiper/css/swiper.css';
import Css from '../../../assets/css/home/index/index.css';
const SearcgComponemt=lazy(()=>import('../../../components/search/search'))
class Index extends React.Component{
    constructor(){
        super();
        this.state={
            bScroll:false,
            bPageStyle:false
        }
        this.bScroll=true
    }
    componentDidMount(){
        setScrollTop(window.base.pages.index.iScrollTop);
        this.getSwiperData();
        this.getIndexClass();
        this.getIndexProduct();
        this.getRecommendData();
        //监听滚动的高度
        window.addEventListener('scroll',this.getScroll.bind(this),false);
    }
    //页面离开时调用，页面离开时去除滚动事件解决页面切换时内存泄漏，
    componentWillUnmount(){
        this.bScroll=false;
        window.removeEventListener('scroll',this.getScroll.bind(this));
        this.setState=(state,callback)=>{
            return;
        }
    }
    //滚动事件
    getScroll(){
        let isScroll= document.documentElement.scrollTop || document.body.scrollTop;
        window.base.pages.index.iScrollTop = isScroll;
        if(this.bScroll){
            if(isScroll>100){
                this.setState({bScroll:true})
            }else {
                this.setState({bScroll:false})
            }
        }
    }
    //异步留获取swipei图片
    getSwiperData(){
        this.props.dispatch(
            action.actSwiper.getSwiper({
                success:()=>{
                    this.indexSwiper()
                }
            })
        );
    }
    //swiper切换
    indexSwiper(){
        var refIndSwiper=this.refs['indSwiper']
        new Swiper(refIndSwiper, {
            autoplay: {
                disableOnInteraction: false,
            },
            pagination: {
                el: '.swiper-pagination',
            },
            loop : true,
            lazy: true,
        })
    }
    //获取分类数据
    getIndexClass(){
       this.props.dispatch(action.actIndClass.getIndClass())

    }
    //获取产品列表数据
    getIndexProduct(){
        this.props.dispatch(action.actIndProduct.getIndProduct({success:()=>{lazyImg()}}))
    }
    //获取推荐产品
    getRecommendData(){
        this.props.dispatch(action.actRecommend.getRecommend({success:()=>{lazyImg()}}))
    }
    //进入历史记录页面
    goPage(purl){
        GoPagePush(this.props,purl)
    }
    //显示seach组件
    changePageStyle(){
        this.setState({bPageStyle:true})

    }
    //隐藏seach组件
    getPageStyle(val){
        this.setState({bPageStyle:val})
    }
    render(){
        return(
            <div>
                <SearcgComponemt pageStyle={this.state.bPageStyle?"block":"none"} getPageStyle={this.getPageStyle.bind(this)}></SearcgComponemt>
                {/*indexTop*/}
                <div className={this.state.bScroll?Css['indTop']+' '+Css['active']:Css['indTop']}>
                    <div className={Css['indTopLeft']} onClick={this.goPage.bind(this,'goods/classify/items')}><i className={'nav'}/></div>
                    <div className={Css['indTopCen']+' fs28'} onClick={this.changePageStyle.bind(this)}><i className={'seach mr10'} />请输入宝贝名称</div>
                    {
                        this.props.state.redLogin.isLogin?<div className={Css['indTopRight']} onClick={this.goPage.bind(this,'home/user')}><i className={'personal'} /></div>:<div className={'fs28'} onClick={this.goPage.bind(this,'login/index')}>登录</div>
                    }

                </div>
                {/*indexSwiper*/}
                <div ref='indSwiper' className={Css['indSwiper']}>
                    <div className="swiper-wrapper">
                        {
                            this.props.state.redSwiper.aSwiper.length>0?this.props.state.redSwiper.aSwiper.map((item,index)=>{
                                return(
                                    <div key={index} className="swiper-slide ">
                                        <a href={item.webs}  rel="noopener noreferrer"> <img src={require('../../../assets/images/commen/lazyImg.jpg')} data-src={item.image} class={'swiper-lazy'} alt={item.title} /></a>
                                        <div className="swiper-lazy-preloader "></div>
                                    </div>
                                )
                            }):'没有相关图片'
                        }
                    </div>
                    <div className={"swiper-pagination"}></div>
                </div>

                {/*indexClass*/}
                <div className={Css['indexClass']}>
                    <ul>
                        {
                            this.props.state.redIndClass.indClass.length>0?this.props.state.redIndClass.indClass.map((item,index)=>{
                                return(
                                    <li key={index} className={'fs28'}><i className={item.icn+' fs50'} style={{background:item.bgColor}} onClick={this.goPage.bind(this,'goods/classify/items?cid='+item.cid)}/>{item.title}</li>
                                )
                            }):''
                        }
                    </ul>
                </div>
                {/*Product*/}
                {
                    this.props.state.redIndProduct.aIndProduct.length>0?this.props.state.redIndProduct.aIndProduct.map((item,index)=>{
                        return(
                            <div className={Css['indProduct']+' mt20'} key={index}>
                                <div className={Css['indTitle']+' '+Css[item.class]+' fs32'}>—— {item.title} ——</div>

                                        <div className={Css['indProBox']}>
                                            <div className={Css['indProItem']} onClick={this.goPage.bind(this,'goods/details/commodity?gid='+item.items[index].gid)}>
                                                <div className={Css['indProTitle']+' ovflOne'}>{item.items[0].title}</div>
                                                <div className={Css['indProTitleLabel']+' mt10 '}><p className={' fs28'}>精品打折</p></div>
                                                <div className={Css['indProImg']+' mt20'}><img  src={require('../../../assets/images/commen/lazyImg.jpg')} alt={item.items[0].title} data-echo={item.items[0].image}  /> </div>
                                            </div>
                                            {
                                                index%2===1?
                                                    <div className={Css['indProItem']+' lineL'} onClick={this.goPage.bind(this,'goods/details/commodity?gid='+item.items[index].gid)}>
                                                        <div className={Css['indProTitle']+' ovflOne'}>{item.items[1].title}</div>
                                                        <div className={Css['indProTitleLabel']+' mt10 '}><p className={' fs28'}>精品打折</p></div>
                                                        <div className={Css['indProImg']+' mt20'}><img  src={require('../../../assets/images/commen/lazyImg.jpg')} alt={item.items[1].title} data-echo={item.items[1].image} /> </div>
                                                    </div>
                                                        :
                                                    <div className={Css['indProItem']+' lineL'}>
                                                        {
                                                            item.items.length>0?item.items.slice(1,3).map((item1,index1)=>{
                                                                return(
                                                                    <div key={index1} className={Css['indProItemLi']} onClick={this.goPage.bind(this,'goods/details/commodity?gid='+item1.gid)}>
                                                                        <div className={Css['indProItemLiFont']}>
                                                                            <div className={Css['indProTitle']+' ovflOne'}>{item1.title}</div>
                                                                            <div className={Css['indProTitleLabel']+' mt10 '}><p className={' fs28'}>品质精挑</p></div>
                                                                        </div>
                                                                        <div className={Css['indProItemLiImg']}>
                                                                            <img  src={require('../../../assets/images/commen/lazyImg.jpg')} alt={item1.title} data-echo={item1.image}  />
                                                                        </div>
                                                                    </div>
                                                                )
                                                            }):'没有相关产品'
                                                        }
                                                    </div>
                                            }
                                        </div>

                                <div className={Css['indProList']}>
                                    <ul>
                                        {
                                            item.items.length>0?item.items.slice(index%2===1?2:3).map((item2,index2)=>{
                                                    return(
                                                    <li key={index2} onClick={this.goPage.bind(this,'goods/details/commodity?gid='+item2.gid)}>
                                                        <div className={Css['indProTitle']+' ovflOne'}>{item2.title}</div>
                                                        <div className={Css['indProListImg']}><img  src={require('../../../assets/images/commen/lazyImg.jpg')} alt={item2.title} data-echo={item2.image}  /></div>
                                                        <div className={Css['indProListPrice']+' fs28 mt5'}>￥{item2.price}</div>
                                                        <div className={Css['unIndProListPrice']+' fs28 '}>￥{item2.price*2}</div>
                                                    </li>
                                                )
                                                })
                                                :'没有相关产品'
                                        }
                                    </ul>
                                </div>
                            </div>
                        )
                    }):'没有找到产品'
                }
                {/*Recommend*/}
                <div className={Css['indRecommendTitle']+' fs32 mt10'}><span><i className={'recommend'} /> 为你推荐</span></div>
                <div className={Css['indRecommend']}>
                    <ul>
                        {
                            this.props.state.redRecommend.aRecommend.length>0?this.props.state.redRecommend.aRecommend.map((item,index)=>{
                                    return(
                                    <li key={index} onClick={this.goPage.bind(this,'goods/details/commodity?gid='+item.gid)}>
                                        <div className={Css['indRecommendImg']}><img src={require('../../../assets/images/commen/lazyImg.jpg')} alt={item.title} data-echo={item.image} /></div>
                                        <div className={Css['indRecommendFont']+' ovflOnes fs28 mt15'}>{item.title}</div>
                                        <div className={Css['indProListPrice']+' fs28 mt5'}>￥{item.price}</div>
                                    </li>
                                )
                                })
                                :'没有相关产品'
                        }
                    </ul>
                </div>

            </div>
        )
    }
}
export default connect((state)=>{
    return {
        state:state
    }
})(Index);